<template>
  <el-table
      :data="tableData"
      border
      :summary-method="summaryMethod"
      show-summary
      style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="amount1" label="Cost 1 ($)" data-xxx="abc"/>
    <el-table-column prop="amount2" label="Cost 2 ($)" />
    <el-table-column prop="amount3" label="Cost 3 ($)" />
  </el-table>
</template>

<script lang="ts" setup>
import type { VNode } from 'vue'
import type { TableColumnCtx } from 'element-plus'
import { wrapSummaryMethod, sum, avg } from '@/el-table-summary-method'
interface Product {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const propSummaryTypes = {
  "amount1": function(values: Number[]){
    return values.join()
  },
  "amount2": avg,
  "amount3": sum
}

const summaryMethod = wrapSummaryMethod(propSummaryTypes)
const tableData: Product[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '0.10',
    amount2: '0.10',
    amount3: 10,
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '0.2',
    amount2: '0.2',
    amount3: 12,
  },

]
</script>
